<template>
  <view style="background-color: aliceblue;">
    <!-- 顶部导航 -->
    <view class="white" style="display: flex;">
      <view class="blueline"></view>
      <!-- 左侧菜单 -->
      <view class="left">
        <view v-for="(item, index) in departments" :key="index" class="font"
          :class="{'active': activeIndex === index}" @click="cli(index)">
          {{ item.name }}
        </view>
      </view>

      <!-- 右侧内容 -->
      <view class="right">
        <view v-for="(child, index) in currentChildren" :key="index" class="right-item"
          @click="goToDetailPage(child.name, child.id)">
          {{ child.name }}
          <image class="arrow-icon" src="/static/right.png" alt="Arrow" />
        </view>
        <view v-if="currentChildren.length === 0" class="right-item">
          暂无数据
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { lists } from '/api/index.js'; // 导入接口封装

// 响应式数据
const departments = ref([]); // 科室列表
const activeIndex = ref(0); // 当前激活的科室索引
const currentChildren = ref([]); // 当前科室的子科室
const topHeight = ref(0); // 用于存储动态计算的top高度

// 在组件挂载时获取设备信息
onMounted(() => {
  const systemInfo = uni.getSystemInfoSync();
  const navBarHeight = systemInfo.statusBarHeight; // 获取状态栏的高度
  topHeight.value = navBarHeight + 44; // 导航栏高度加44px
  console.log('导航栏高度:', navBarHeight);
  console.log('动态计算的top高度:', topHeight.value);
});

// 获取科室数据
const fetchDepartments = async () => {
  try {
    const res = await lists({}); // 使用封装的接口
    console.log("请求响应数据:", res); // 打印响应数据

    // 确保数据结构正确
    if (res && res.code === 1 && Array.isArray(res.data)) {
      departments.value = res.data; // 正确获取部门列表
      updateRightContent(0); // 默认显示第一个科室的子项
    } else {
      console.error("数据格式不正确", res);
    }
  } catch (error) {
    console.error("Error fetching data:", error);
  }
};

// 初始化请求
onMounted(() => {
  fetchDepartments();
});

// 切换左侧菜单
const cli = (index) => {
  activeIndex.value = index; // 更新 activeIndex，确保高亮
  updateRightContent(index); // 更新右侧内容
};

// 更新右侧内容
const updateRightContent = (index) => {
  const children = departments.value[index]?.childrens || [];
  currentChildren.value = children; // 确保更新 right 内容
};

// 返回上一页
const returns = () => {
  uni.navigateTo({
    url: '/pages/home/home'
  });
};

// 存储点击的科室信息并跳转到详情页
const goToDetailPage = (childName, childId) => {
  // 存储当前点击的科室信息
  uni.setStorage({
    key: 'selectedDepartment',
    data: {
      name: childName,
      id: childId
    },
    success: () => {
      console.log('科室信息存储成功');
    },
    fail: (err) => {
      console.error('存储失败', err);
    }
  });

  // 跳转到详情页面
  uni.navigateTo({
    url: `/pages/date/date?name=${childName}&id=${childId}`, // 通过 query 参数传递
  });
};
</script>

<style scoped>
/* 顶部样式 */
.top {
  background-color: #00daca;
  width: 100%;
  height: 5rem;
  color: white;
  font-size: 21px;
  line-height: 3rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  padding-left: 15px;
}

.top-item {
  display: flex;
  align-items: center;
  margin-top: 30px;
}

.top-item image {
  width: 16px;
  height: 16px;
  margin-right: 10px;
}

.left {
  width: 25%;
  background-color: white;
  border-radius: 10px;
  padding-top: 5px;
}

.right {
  width: 68%;
  background-color: white;
  margin-left: 1%;
  margin-top: 7px;
  border-radius: 10px;
  padding: 10px;
}

.font {
  text-align: left;
  padding: 10px;
  cursor: pointer;
  position: relative; /* 为伪元素定位做准备 */
}

.font.active {
  font-weight: bold;
  color: #3861ed;
  /* 高亮显示样式 */
  background-color: rgba(56, 97, 237, 0.1); /* 添加浅色背景 */
}

.font.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: #3861ed; /* 与字体颜色一致的高亮条 */
  border-radius: 0 2px 2px 0;
}

.right-item {
  display: flex;
  justify-content: space-between;
  padding: 14px;
  cursor: pointer;
}

.arrow-icon {
  width: 12px;
  height: 12px;
  margin-right: 10px;
}

.separator {
  border: 0;
  border-top: 1px solid #dedede;
  margin: 5px 0;
}
</style>  